<!--添加人员-->
<template>
  <div>
    <el-dialog class="form-dialog" title="角色中添加人员" :visible.sync="dialogProp.visible" @opened="listenOpenedDialog" @closed="listenClosedDialog">
      <div class="role-info">
        <p>
          <span>角色名称:</span>
          <span>{{ roleInfo.roleName }}</span>
        </p>
      </div>
      <div class="box clearfix">
        <div class="box-content box-left">
          <div class="box-header">
            <div class="box-header-title text-left">选择用户</div>
          </div>
          <div class="box-body">
            <div class="box-body-operat">
              <el-input
                v-model="userfilterText"
                placeholder="输入关键字进行过滤"
              />
            </div>
            <div class="line" />
            <div class="box-body-item">
              <el-tree
                ref="tree"
                :data="departmentUserList"
                show-checkbox
                node-key="id"
                :default-checked-keys="defaultCheckedKeys"
                :props="defaultProps"
                :highlight-current="true"
                accordion
                default-expand-all
                :filter-node-method="filterNode"
                @check="chekChange"
              />
            </div>

          </div>
        </div>
        <div class="box-content box-right">
          <div class="box-header">
            <div class="box-header-title text-left">已选用户</div>
          </div>
          <div class="box-body">
            <div class="box-body-operat text-right">
              <el-button type="text" @click="resetChecked">清空</el-button>
            </div>
            <div class="line" />
            <div class="box-body-item">
              <div v-for="(item,index) in selectedUserList" :key="index" class="user-item clearfix">
                <div class="item-left">
                  <span class="item-chName">{{ item.chName }}</span>
                  <!-- <span class="item-orgName">{{ item.orgName }} / {{ item.roleName }}</span> -->
                </div>
                <div class="item-right text-center">
                  <span class="item-icon el-icon-close" @click="deleteItem(index)" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer">
        <el-button @click="dialogProp.visible = false">取消</el-button>
        <el-button type="primary" @click="dialogSubmit()">立即提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { batchUpdateRole } from '@/api/api'

export default {
  name: 'SetUser',
  props: {
    // 弹窗属性相关数据(必传)
    dialogProp: {
      type: Object,
      default: null
    },
    // 用户信息(必传)
    userList: {
      type: Array,
      default: null
    },
    // 角色信息(必传)
    roleInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      userfilterText: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 默认选中值
      defaultCheckedKeys: [],
      // 部门对应员工
      departmentUserList: [],
      // 右侧已选用户
      selectedUserList: []

    }
  },
  watch: {
    userfilterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    // 树勾选状态发生改变
    chekChange(data1, data2) {
      this.selectedUserList = []
      const tempList = [...data2.checkedNodes, ...data2.halfCheckedNodes]
      for (let i = 0, len = tempList.length; i < len; i++) {
        // 遍历出对应的员工
        if (tempList[i].chName) {
          this.selectedUserList.push(tempList[i])
        }
      }
    },
    // 清空
    resetChecked() {
      this.selectedUserList = []
      this.$refs.tree.setCheckedKeys([])
      // console.log(this.$refs.tree.getCheckedKeys())
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 转换部门树数据结构,使员工成为部门子级
    transitionOrgList(list) {
      function childrenEach(itemList) {
        for (let i = 0, length = itemList.length; i < length; i++) {
          // 把"chName"字段和"orgName"转为"name"
          if (itemList[i].orgName) {
            itemList[i].name = itemList[i].orgName
            itemList[i].id = itemList[i].orgId
          }
          if (itemList[i].chName) {
            itemList[i].name = itemList[i].chName
            itemList[i].id = itemList[i].userId
          }
          if (itemList[i].userList && itemList[i].userList.length) {
            const tempList = [...itemList[i].userList, ...itemList[i].children]
            itemList[i].children = tempList
          }
          if (itemList[i].children && itemList[i].children.length) {
            childrenEach(itemList[i].children)
          }
        }
        return list
      }
      return childrenEach(list)
    },
    // 转换部门树数据结构,把员工"chName"字段转为"name"
    transitionUserList(list) {
      for (let i = 0, len = list.length; i < len; i++) {
        list[i].name = list[i].chName
      }
      return list
    },
    // 删除
    deleteItem(index) {
      this.selectedUserList.splice(index, 1)
      this.$refs.tree.setCheckedKeys(this.Utils.getTreeDataIDList(this.selectedUserList, 'userId'))
      // console.log(this.defaultCheckedKeys)
    },
    // 表单提交
    dialogSubmit() {
      this.$confirm(`您确定要执行此操作吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          roleId: this.roleInfo.roleId,
          ids: this.Utils.getTreeDataIDList(this.selectedUserList, 'userId')
        }
        batchUpdateRole(params).then(res => {
          if (res.code === '0000') {
            this.dialogProp.visible = false
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$emit('getTableList', false)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    listenOpenedDialog() {
      const tempList = this.Utils.deepCopy(this.$store.getters.departmentList)
      this.departmentUserList = this.transitionOrgList(tempList)

      // 设置勾选状态
      this.$refs.tree.setCheckedKeys(this.Utils.getTreeDataIDList(this.userList, 'userId'))
      this.selectedUserList = this.Utils.deepCopy(this.userList)
    },
    listenClosedDialog() {

    }

  }
}
</script>

<style lang="scss" scoped>
.role-info{
  p{
    margin: 0px;
    height: 30px;
    line-height: 30px;
  }
}
.box{
  padding: 10px;
  border: 1px solid #ebeef5;
  .box-left{
    float: left;
    width:49%;
  }
  .box-right{
    float: right;
    width:49%;
  }
  .box-content{
    border: 1px solid #ebeef5;
    .box-header{
      background-color:#eeeeee;
      .box-header-title{
        padding-left: 10px;
        // margin: 10px;
        height: 36px;
        line-height: 36px;
      }
    }
    .box-body{
      // border: 1px solid #ebeef5;
      .box-body-operat{
        margin: 6px 20px;
      }
      .line{
        border-bottom: 1px solid #ebeef5;
      }
      .box-body-item{
        padding:10px;
        height: 400px;
        overflow-y: auto;
        .user-item{
          height: 30px;
          line-height: 30px;
          border-bottom: 1px solid #ebeef5;
          .item-left{
            width: 85%;
            float: left;
            span{
              display: inline-block;
              width:49%;
            }
            .item-chName{
              width:35%;
            }
            .item-orgName{
              width:64%;
            }
          }
          .item-right{
            width: 14%;
            float: right;
            .item-icon{
              font-size: 20px;
              font-weight: bold;
              cursor: pointer;
              color:#F56C6C;
            }
            .item-icon:hover{
              color:#20a0ff;
            }
          }
        }
      }
    }
  }
}
</style>
